<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心首页</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>
        $(document).ready(function () {
            $("#myForm").submit(function () {
                var avatar=$("#avatar").val()
                var email=$("#email").val()
                if (avatar.length==0){
                    $("#ErrorAvatar").html("请选择头像!")
                    return false
                }
                $("#ErrorAvatar").html("")
                var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if(!myreg.test(email)){
                    $("#ErrorEmail").html("请输入正确邮箱地址");
                    return  false;
                }
                $("#ErrorEmail").html("")
            })
            $("#myForm2").submit(function () {
                var formData = new FormData();
                var oldpassword=$("#oldpassword").val()
                var password1=$("#password1").val()
                var password=$("#password").val()
                if (oldpassword.length==0){
                    $("#ErrorOldPassword").html("不能为空")
                    return false;
                }

                if (oldpassword.length<6||oldpassword.length>12){
                    $("#ErrorOldPassword").html("密码必须为6-12位")
                    return false
                }
                $("#ErrorOldPassword").html("")
                if (password1.length==0){
                    $("#ErrorPassword1").html("不能为空")
                    return false
                }
                if (password1.length<6 ||password1.length>12){
                    $("#ErrorPassword1").html("密码必须为6-12位")
                    return false
                }
                $("#ErrorPassword1").html("")
                if (password!=password1){
                    $("#ErrorPassword").html("密码不一致")
                    return false
                }
                $("#ErrorPassword").html("")
                $.ajax({
                    type: "POST",
                    url: "/user/updatePassword",
                    data: $(this).serialize(),
                    success: function(data) {
                        if (data.code===1002){
                            window.location.href="/user/toHome"
                            alert(data.message)

                        }else if (data.code===1003){
                            window.location.href="/user/toLogin"
                        }else {
                            alert("修改成功")
                            window.location.href="/user/toHome"

                        }
                    }
                })
            })
        })

    </script>
</head>
<body>
<div
        class="v3-app-layout layoutstatus-header--Normal layoutstatus-side--Hidden limitWidth">
    <div th:replace="header :: #header"></div>
    <div class="v3-app-layout__content">
        <div class="UserCenter">
            <div class="UserCenter__tab">
                <h4 class="UserCenter__tab-title">个人中心</h4>
                <div th:replace="left :: #left"></div>
            </div>
            <div class="UserCenter__content">
                <div class="UserCenter__setting">
                    <div class="compoent-sortTabs__container UserCenter__Setting__tab">
                        <div class="compoent-sortTabs__tabItemWrapper first">
                            <div class="compoent-sortTabs__tabItem active first">
                                <span>基本信息</span>
                                <div class="ink"></div>
                            </div>
                        </div>
                        <div class="compoent-sortTabs__appendNode"></div>
                    </div>
                    <div class="UserCenter__setting__content">
                        <div class="UserCenter__profile">
                            <div class="UserCenter__profile__title">账号信息</div>
                            <div class="UserCenter__profile__content">
                                <div class="UserCenter__profile__right">
                                    <div class="UserCenter__profile__item">
                                        <div class="UserCenter__profile__item-wrapper">
                                            <div class="UserCenter__profile__item-field">头像</div>
                                            <div class="UserCenter__profile__item-value">
                                                <div class="component-avatar UserCenter__profile__avatar"
                                                     style="width: 48px; height: 48px; border: none;">
														<span class="component-avatar__inner"><picture>
															<source
                                                                    srcset=""
                                                                    type="image/webp">
															<img class="BU-MagicImage"
                                                                 th:src="${user.avatar}"
                                                                 alt=""
                                                                 style="width: 100%; height: 100%; transition: transform 0.3s ease 0s; object-fit: cover;"></picture></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <form id="myForm" method="post" action="/user/updateAvatar"  enctype="multipart/form-data">
                                <input type="file"
                                       accept="image/png, image/jpeg, image/jpg, image/jpg2, image/webp, image/bmp"
                                       name="avatar"
                                       id="avatar"
                                >
                                <div style="color: red" id="ErrorAvatar"></div>
                                <br/>
                                <div class="UserCenter__profile__item">
                                    <div class="UserCenter__profile__item-wrapper">
                                        <div class="UserCenter__profile__item-field">邮箱：</div>
                                        <div><input type="email" id="email" th:value="${user.email}" name="email"></div>
                                        <div style="color: red" id="ErrorEmail"></div>
                                    </div>
                                </div>

                                <input type="submit" class="button border-main" value="提交"/>
                            </form>

                            <form id="myForm2" action="/user/updatePassword" method="post">

                                <div class="UserCenter__profile__item">
                                    <div class="UserCenter__profile__item-wrapper">
                                        <div class="UserCenter__profile__item-field">原密码：</div>
                                        <div><input type="password" id="oldpassword" name="oldpassword"></div>
                                        <div style="color: red" id="ErrorOldPassword"></div>
                                    </div>
                                </div>
                                <div class="UserCenter__profile__item">
                                    <div class="UserCenter__profile__item-wrapper">
                                        <div class="UserCenter__profile__item-field">新密码：</div>
                                        <div><input type="password" id="password1"></div>
                                        <div style="color: red" id="ErrorPassword1"></div>
                                    </div>
                                </div>
                                <div class="UserCenter__profile__item">
                                    <div class="UserCenter__profile__item-wrapper">
                                        <div class="UserCenter__profile__item-field" style="width: 70px">确认密码：</div>
                                        <div><input type="password" id="password" name="password"></div>
                                        <div style="color: red" id="ErrorPassword"></div>
                                    </div>
                                </div>
                                <input type="submit" id="sub" class="button border-main" value="提交"/>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>